<template>
  <div>
    <el-dialog v-loading="loading" title="成绩详情" :visible="open" :close-on-click-modal="false"
      :close-on-press-escape="false" width="1200px" append-to-body @close="cancel()">
      <!-- 基本信息 -->
      <div class="info">
        <div class="line1 line flex">
          <div class="line_item flex">
            <div class="line_lable">学生:</div>
            <div class="line_value overtxt" style="width: 135px">
              <Texttooltip :width="135" :text="info.studentName"></Texttooltip>
            </div>
          </div>
          <div class="line_item flex">
            <div class="line_lable">课程:</div>

            <div class="line_value overtxt" style="width: 135px">
              <Texttooltip :width="135" :text="info.courseName"></Texttooltip>
            </div>
          </div>
          <div class="line_item flex">
            <div class="line_lable">补考次数:</div>
            <div class="line_value">
              {{ info.examApplyNum ? info.examApplyNum : 0 }}
            </div>
          </div>
          <div class="line_item flex">
            <div class="line_lable">
              个人成绩
              <el-tooltip class="item" effect="dark" placement="bottom">
                <i class="el-icon-question" style="font-size: 16px; vertical-align: middle"></i>
                <div slot="content">
                  <div>个人在该课程的平均分（百分制）</div>
                  <div>"0"：课程平均成绩</div>
                  <div>" "：该课程没有考核</div>
                  <div>"-"：员工尚未完成课程</div>
                  <div>"/"：手动通过</div>
                </div>
              </el-tooltip>:
            </div>
            <div class="line_value">
              {{
      info.manualPass
        ? "/"
        : info.studyStatus == 2
          ? info.avgScore
          : "--"
    }}
            </div>
          </div>
          <div class="line_item flex">
            <div class="line_lable">
              课程平均分
              <el-tooltip class="item" effect="dark" placement="bottom">
                <i class="el-icon-question" style="font-size: 16px; vertical-align: middle"></i>
                <div slot="content">
                  所有完成本课程学生的平均分(百分制)
                </div>
              </el-tooltip>:
            </div>
            <div class="line_value">
              {{ info.schoolCourseAvgScore }}
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="gradeList" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
        <el-table-column prop="chapterName" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="taskName" label="步骤名称" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.studyStatus == 2">已完成</span>
            <span v-if="scope.row.studyStatus == 1">学习中</span>
            <span v-if="scope.row.studyStatus == 0">未开始</span>
            <span v-if="scope.row.studyStatus == -1">未完成</span>
            <span v-if="!scope.row.studyStatus">--</span>
          </template>
        </el-table-column>
        <el-table-column prop="examApplyNum" align="center">
          <template slot-scope="scope">
            <div>
              {{
      scope.row.examId
        ? scope.row.studyStatus == 2 || scope.row.studyStatus == -1 || scope.row.studyStatus == 1
          ? scope.row.examApplyNum
          : "--"
        : ""
    }}
            </div>
          </template>
          <template #header>
            <div class="flexcolcenter flexcen">
              考核补考次数<el-tooltip class="item" effect="dark" placement="bottom">
                <i class="el-icon-question shou" style="
                    font-size: 16px;
                    vertical-align: middle;
                    margin-left: 5px;
                  "></i>
                <div slot="content">
                  <div>"0"：课程平均成绩</div>
                  <div>" "：该课程没有考核</div>
                  <div>"-"：员工尚未完成课程</div>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="score" align="center">
          <template slot-scope="scope">
            <div>
              {{
        scope.row.examId
          ? scope.row.studyStatus == 2 || scope.row.studyStatus == -1 || scope.row.studyStatus == 1
            ? scope.row.score
            : "--"
          : ""
              }}
            </div>
          </template>
          <template #header>
            <div class="flexcolcenter flexcen">
              考核成绩<el-tooltip class="item" effect="dark" placement="bottom">
                <i class="el-icon-question shou" style="
                    font-size: 16px;
                    vertical-align: middle;
                    margin-left: 5px;
                  "></i>
                <div slot="content">
                  <div>"0"：课程平均成绩</div>
                  <div>" "：该课程没有考核</div>
                  <div>"-"：员工尚未完成课程</div>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end">
        <el-button type="primary" v-preventReClick @click="pre" v-if="showPre">上一份</el-button>
        <el-button type="primary" v-preventReClick @click="next" v-if="showNext">下一份</el-button>
        <el-button v-preventReClick @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { gradesDetail } from "@/api/schoolOrganization/student";
export default {
  props: {
    open: Boolean,
    id: [String, Number],
    schoolCourseId: [String, Number],
    index: [String, Number],
    list: Array,
  },
  data() {
    return {
      // list用于表格显示
      gradeList: [],
      rowSpanArr: [],
      position: "",
      loading: false,
      info: "",
      // index和id用于上一份下一份
      gradeIndex: "",
      gradeId: "",
      showPre: true,
      showNext: true,
    };
  },
  watch: {
    async open(e) {
      if (e) {
        console.log(this.list, this.id);
        this.gradeIndex = this.index;
        this.getList();
      }
    },
  },
  mounted() { },
  methods: {
    getRowSpan() {
      this.rowSpanArr = [];
      this.gradeList.forEach((item, index) => {
        if (index == 0) {
          this.rowSpanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.gradeList[index].chapterId ==
            this.gradeList[index - 1].chapterId
          ) {
            this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中
            this.rowSpanArr.push(0);
          } else {
            this.rowSpanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        if (this.rowSpanArr[rowIndex] > 0) {
          return {
            rowspan: this.rowSpanArr[rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    async getList() {
      this.loading = true;
      let res;

      try {
        res = await gradesDetail({
          schoolCourseId: this.list[this.gradeIndex].schoolCourseId,
          studentId: this.list[this.gradeIndex].studentId,
        });
      } catch (error) {
        res = { data: [] };
      }
      this.loading = false;
      this.info = res.data;
      // 通过外面数组传进来 判断是否显示下一份 和 上一份
      if (this.list.length > 0) {
        if (this.gradeIndex == 0) {
          this.showPre = false;
        } else {
          this.showPre = true;
        }
        if (this.gradeIndex == this.list.length - 1) {
          this.showNext = false;
        } else {
          this.showNext = true;
        }
      }

      // 处理数组
      let arr = [];
      if (res.data.tasks.length > 0) {
        res.data.tasks.map((item2) => {
          item2.offlineScore =
            item2.offlineScore !== " " && item2.offlineScore !== "--"
              ? `${item2.offlineScore} / ${item2.offlineTotalScore}`
              : item2.offlineScore;
          item2.onlineScore =
            item2.onlineScore !== " " && item2.onlineScore !== "--"
              ? `${item2.onlineScore} / ${item2.onlineTotalScore}`
              : item2.onlineScore;
          arr.push(item2);
        });
      }
      this.gradeList = arr;
      this.getRowSpan();
    },
    async next() {
      this.gradeIndex++;
      console.log(this.gradeIndex, this.list);
      this.gradeId = this.list[this.gradeIndex].id;
      this.getList();
    },
    async pre() {
      this.gradeIndex--;
      console.log(this.gradeIndex, this.list);
      this.gradeId = this.list[this.gradeIndex].id;
      this.getList();
    },
    cancel() {
      this.$emit("update:open", false);
    },
  },
};
</script>
<style scoped lang="scss">
.info {
  .line {
    margin-bottom: 15px;
  }

  .line_item {
    box-sizing: border-box;
    padding-right: 15px;
    width: 180px;
  }

  .line_lable {
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    color: rgba(153, 153, 153, 1);
  }

  .line_value {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: rgba(51, 51, 51, 1);
  }
}
</style>
